<template>
    <div>
        <el-card class="main_card">
            <div class="info_field">
                <el-upload class="avatar-uploader" :action="uploadURL" :show-file-list="false" :on-success="handleAvatarSuccess" name="uploadFile" :headers="header">
                    <img  :src=" avatarUrl" class="avatar">
                </el-upload>
                    <div class="text_field"> 
                        <el-button type="primary" icon="el-icon-edit" circle size="mini" @click="editName" ></el-button>
                        <h>用户名:</h>
                        <span>{{shopName}}</span> 
                        
                    </div>
                    <div class="text_field">
                        <el-button type="primary" icon="el-icon-edit" circle size="mini" @click="editPassword" ></el-button>
                         <h>密码:</h>
                         <span v-for="item in password.length">*</span>
                         
                    </div>
                    <div class="text_field"> 
                        <el-button type="primary" icon="el-icon-edit" circle size="mini" @click="editAddress" ></el-button>
                        <h>地址:</h>
                        <span>{{address}}</span>              
                    </div>
                <el-button type="primary" @click="saveEdit">保 存</el-button>
                <el-button  @click="editClosed">取 消</el-button>
            </div>
        </el-card>
        
        <el-dialog :visible.sync="nameDialogVisible" width="50%" :close-on-click-modal="false" title="修改用户名" >
            <el-form label-width="100px">
                <el-form-item label="新用户名">
                    <el-input v-model="editForm.username"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button  @click="nameDialogVisible=false">取 消</el-button>
                <el-button type="primary" @click="uploadName">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog :visible.sync="passwordDialogVisible" width="50%" :close-on-click-modal="false" title="修改用户名" >
            <el-form label-width="110px">
                <el-form-item label="旧密码">
                    <el-input v-model="oldPassword" type="password"></el-input>
                </el-form-item>
                <el-form-item label="新密码">
                    <el-input v-model="newPassword" type="password"></el-input>
                </el-form-item>
                <el-form-item label="再次输入新密码">
                    <el-input v-model="newPasswordA" type="password"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button  @click="passwordDialogVisible=false">取 消</el-button>
                <el-button type="primary" @click="uploadPassword">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog :visible.sync="addressDialogVisible" width="50%" :close-on-click-modal="false" title="修改地址" >
            <el-form label-width="100px">
                <el-form-item label="省市区/县"  >
                    <el-cascader v-model="address1"  :options="cityData"  clearable >
                    </el-cascader>
                </el-form-item>
                 <el-form-item label="详细地址" >
                    <el-input v-model="address2" ></el-input>
                </el-form-item> 
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button  @click="addressDialogVisible=false">取 消</el-button>
                <el-button type="primary" @click="uploadAddress">确 定</el-button>
            </span>
        </el-dialog>
        
    </div>
</template>
<script>
import cityData from './citydata.js';
export default {
    data(){
        return{
            avatarUrl:'',
            address:'',
            password:'',
            shopName:'',
            uploadURL:'http://119.23.40.43/rent/upload',
            header:{merchant:window.sessionStorage.getItem("user")},
            oldPassword:'',
            newPassword:'',
            newPasswordA:'',
            address1:'',
            address2:'',
            cityData,
            editForm:{
                strId:'2',
                url:'',
                username:'',
                password:'',
                address:''
            },
            nameDialogVisible:false,
            passwordDialogVisible:false,
            addressDialogVisible:false
        }
    },
    methods:{
        getInfo()
        { 
            this.avatarUrl=window.sessionStorage.getItem("merchantAvatar");
            this.shopName=window.sessionStorage.getItem("merchantName");
            this.password=window.sessionStorage.getItem("merchantPassword");
            this.address=window.sessionStorage.getItem("merchantAddress");
        },
        handleAvatarSuccess(response){
            this.avatarUrl=response.data;
        },
        editName(){
            this.nameDialogVisible=true;
        },
        uploadName(){
            this.shopName=this.editForm.username;
            this.nameDialogVisible=false;
        },
        editPassword()
        {
            this.passwordDialogVisible=true;
        },
        uploadPassword(){
            if(this.oldPassword!=this.password)
            {
                this.$message.error("旧密码输入错误!")
    
            }
            else if(this.newPassword!=this.newPasswordA){
                this.$message.error("两次密码输入不一致!")
            }
            else{
                this.password=this.newPassword;
                this.passwordDialogVisible=false;
            }
            
        },
        editAddress(){
            this.addressDialogVisible=true;
        },
        uploadAddress()
        {
            this.address=this.address1+this.address2;
            this.addressDialogVisible=false;
        },
        async saveEdit()
        {
            this.editForm.url=this.avatarUrl;
            this.editForm.address=this.address;
            this.editForm.password=this.password;
            this.editForm.username=this.shopName;
            sessionStorage.setItem("merchantAvatar",this.editForm.url)
            sessionStorage.setItem("merchantName",this.editForm.username)
            sessionStorage.setItem("merchantPassword",this.editForm.password)
            sessionStorage.setItem("merchantAddress",this.editForm.address)
            console.log(this.editForm)
            this.$message.success("修改成功!")
            const {data:res}=this.$http.put('rent/Merchant/modify',this.editForm);
            console.log(res)
        },
        editClosed(){
            this.getInfo();
        }

    },
    created(){
        this.getInfo();
    }
}
</script>

<style lang="less" scoped>
.avatar-uploader,.avatar
{
    width:100px;
    height:100px;
    border-radius:50%;
    margin-left: 20px;
}
.info_field
{
    margin-left: 40%;
    padding-top:50px;
    .el-avatar
    {
        width:100px;
        height:100px;
    }
    .text_field
    {
        margin-top:40px;
        margin-bottom: 40px;
        font-size: 20px;
        h{
            font-weight:600;
            margin-right: 5px;
        };
        
    }
}
.el-button
    {
        margin-right:20px;
    }
</style>